﻿
@{
    ViewData["Title"] = "EditMonitorRule";
    Layout = "~/Views/HttpRequestMonitor/HttpRequestMonitorTemplate.cshtml";

    string Id = ViewBag.Id as string;

    List<string> nodes = ViewBag.nodes;

    var lang = ViewBag.Language as JESAI.HttpRequestMonitor.Dashboard.Services.Language.ILanguage;
}


<style type="text/css">

    .wizard-type1 .tab-pane {
        padding: 18px 6px;
    }

    .wizard-type1 ul.steps li.active a {
        border-left: 0;
        border-right: 0;
        border-bottom: 2px solid #67c2ef;
    }

    .wizard-type1 ul.steps li a {
        padding: 0;
        margin: 0 20px;
    }

    @@media screen and (min-width:1170px) {
        .title, .description, .email, .mobiles, .webhook {
            width: 75% !important;
        }
    }

    .tab-pane {
        margin-top: 12px;
        padding: 20px 15px;
        border-radius: 6px;
        border: 1px solid #ccc;
    }
</style>


<div class="panel panel-default">


    <div class="panel-body  task_content" style="padding-left:30px;padding-right:30px;padding-top:30px;min-height:720px;padding-bottom:30px">

        <ol class="breadcrumb">
            <li><a href="/HttpRequestMonitor/Monitor">@lang.Monitor_NavTitle</a></li>
            <li><span href="#">@(Id == "" || Id == "0" ? lang.Monitor_Add :lang.Monitor_Edit) @lang.Task</span></li>
        </ol>

        <h3 style="margin-bottom:20px;">@(Id == "" || Id == "0" ? lang.Monitor_Add : lang.Monitor_Edit) @lang.Monitor_Task</h3>

        <div class="row">

            <div class="panel panel-default">
                <div class="panel-body" style="padding:20px 35px">

                    <div class="row form-inline form">

                        <div class="row" style="margin-left:0;margin-right:0;margin-top:15px">

                            <div class="col-lg-9">
                                <label style="width:100px" class="form-label">@lang.Monitor_Title</label>
                                <input type="text" class="form-control title" placeholder="@lang.Monitor_Title_Placeholder">
                            </div>

                        </div>

                        <div class="row" style="margin-left:0;margin-right:0;margin-top:15px">

                            <div class="col-lg-9">
                                <label style="width:100px" class="form-label">@lang.Monitor_Description</label>
                                <input type="text" class="form-control description" placeholder="@lang.Monitor_Desc_Placeholder">
                            </div>

                        </div>

                        <div class="row" style="margin-left:0;margin-right:0;margin-top:15px;">

                            <div class="col-lg-9 node-row">
                                <label style="width:100px" class="form-label">@lang.Monitor_ServiceNode</label>

                                @foreach (var item in nodes)
                                {
                                    <button onclick="check_node(this)" style="width:120px;margin-right:10px;border-radius:4px;" class="btn btn-info service-button">@item</button>
                                }

                            </div>

                        </div>

                        <div class="row" style="margin-left:0;margin-right:0;margin-top:15px">

                            <div class="col-lg-9">
                                <label style="width:100px" class="form-label">@lang.Monitor_Email</label>
                                <input type="text" class="form-control email" placeholder="@lang.Monitor_Email_Placeholder">
                            </div>

                        </div>

                        <div class="row" style="margin-left:0;margin-right:0;margin-top:15px">

                            <div class="col-lg-9">
                                <label style="width:100px" class="form-label">@lang.Monitor_PushUrl</label>
                                <input type="text" class="form-control webhook" placeholder="@lang.Monitor_Push_Placeholder">
                                
                            </div>

                        </div>


                        @*<hr style="border-top:2px solid #67c2ef;margin-bottom:0" />*@

                        <div class="row" style="margin-left:0;margin-right:0;margin-top:15px;display:none">

                            <div class="col-lg-9">
                                <label style="width:100px" class="form-label">手机号列表</label>
                                <input type="text" value="" class="form-control mobiles" placeholder="告警接收手机号，支持多手机号 10086,10010...">
                            </div>

                        </div>

                        <div class="row" style="margin-left:0;margin-right:0;margin-top:15px;">

                            <div class="col-lg-9">
                                <label style="width:100px" class="form-label">@lang.Monitor_Frequency</label>
                                <select class="form-control interval">
                                    <option value="1">@lang.Monitor_Time1Min</option>
                                    <option value="3">@lang.Monitor_Time3Min</option>
                                    <option value="5">@lang.Monitor_Time5Min</option>
                                    <option value="10">@lang.Monitor_Time10Min</option>
                                    <option value="30">@lang.Monitor_Time30Min</option>
                                    <option value="60" selected>@lang.Monitor_Time1Hour</option>
                                    <option value="120">@lang.Monitor_Time2Hour</option>
                                    <option value="240">@lang.Monitor_Time4Hour</option>
                                    <option value="360">@lang.Monitor_Time6Hour</option>
                                    <option value="480">@lang.Monitor_Time8Hour</option>
                                    <option value="720">@lang.Monitor_Time12Hour</option>
                                    <option value="1440">@lang.Monitor_Time1Day</option>
                                </select>
                            </div>

                        </div>

                        <div class="row" style="margin-left:0;margin-right:0;margin-top:15px">

                            <div class="col-lg-9">
                                <label style="width:100px" class="form-label">@lang.Monitor_State</label>
                                <input type="checkbox" checked class="checkbox" data-on-text="@lang.Monitor_CheckBox_Open" data-handle-width="30" data-off-text="@lang.Monitor_CheckBox_Close" data-size="mini" value="" />
                            </div>

                        </div>


                    </div>

                    <div class="clearfix">
                    </div>


                    <div id="wizard1" class="wizard-type1" style="margin-top:20px;">

                        <div>

                            <ul class="steps nav nav-pills">
                                <li class="active"><a href="#tab11" data-toggle="tab"><span class="badge badge-info"><i class="fa fa-star"></i></span> @lang.Monitor_Type_Timeout</a></li>
                                <li class=""><a href="#tab12" data-toggle="tab"><span class="badge badge-info"><i class="fa fa-credit-card"></i></span> @lang.Monitor_Type_RequestError</a></li>
                                <li class=""><a href="#tab13" data-toggle="tab"><span class="badge badge-info"><i class="fa fa-building"></i></span> @lang.Monitor_Type_IP </a></li>
                                <li class=""><a href="#tab14" data-toggle="tab"><span class="badge badge-info"><i class="fa fa-rocket"></i></span> @lang.Monitor_Type_RequestCount</a></li>
                            </ul>


                        </div>

                        <div class="tab-content">

                            <div id="tab11" class="tab-pane active">

                                <div class="row form-inline form">

                                    <div class="col-sm-12">

                                        <div class="col-lg-12">

                                            <label class="form-label" style="margin-right:10px">@lang.Monitor_State</label>

                                            <input data-id="0" type="checkbox" class="checkbox" data-on-text="@lang.Monitor_CheckBox_Open" data-handle-width="30" data-off-text="@lang.Monitor_CheckBox_Close" data-size="mini" value="" />

                                        </div>

                                    </div>


                                    <div class="col-sm-12" style="margin-top:6px">

                                        <div class="col-sm-3">
                                            <label class="form-label" style="width:80px">@lang.Monitor_Timeout</label>
                                            <input type="text" class="form-control RtTime" placeholder="">
                                        </div>

                                        <div class="col-sm-3" style="padding:0">
                                            <label class="form-label">@lang.Monitor_Timeout_Percentage</label>
                                            <input type="text" value="0.00%" class="form-control RtPercent" placeholder="0.01% 15% ... ">
                                        </div>

                                    </div>

                                    <div class="col-sm-12" style="margin-top:20px;">

                                        <div style="margin-left:12px; margin-right:12px;margin-bottom:0" class="alert alert-info" role="alert">

                                            <p><b>@lang.Monitor_Type_Timeout</b>：@lang.Monitor_Timeout_Description </p>

                                            <p>@lang.Monitor_Timeout_Info</p>

                                        </div>

                                    </div>

                                </div>

                            </div>

                            <div class="tab-pane" id="tab12">

                                <div class="row form-inline form">

                                    <div class="col-sm-12">

                                        <div class="col-lg-12">

                                            <label class="form-label" style="margin-right:10px">@lang.Monitor_State</label>

                                            <input type="checkbox" class="checkbox" data-on-text="@lang.Monitor_CheckBox_Open" data-handle-width="30" data-off-text="@lang.Monitor_CheckBox_Close" data-size="mini" value="" />

                                        </div>

                                    </div>

                                    <div class="col-sm-12" style="margin-top:6px">

                                        <div class="col-sm-3">
                                            <label class="form-label">@lang.Monitor_HttpStatusCode</label>
                                            <input type="text" class="form-control HttpCodes" placeholder="@lang.Monitor_HttpStatusCode_Desc">
                                        </div>

                                        <div class="col-sm-3">
                                            <label class="form-label">@lang.Monitor_Timeout_Percentage</label>
                                            <input type="text" value="0.00%" class="form-control HttpPercent" placeholder=" 0.01% 15% ... ">
                                        </div>

                                    </div>

                                    <div class="col-sm-12" style="margin-top:20px;">

                                        <div style="margin-left:12px;margin-right:12px;margin-bottom:0" class="alert alert-info" role="alert">

                                            <p><b>@lang.Monitor_Type_RequestError</b>：@lang.Monitor_Type_RequestError_Desc </p>

                                            <p>@lang.Monitor_Type_RequestError_Info</p>

                                        </div>

                                    </div>

                                </div>

                            </div>

                            <div class="tab-pane" id="tab13">

                                <div class="row form-inline form">

                                    <div class="col-sm-12">

                                        <div class="col-lg-12">

                                            <label class="form-label" style="margin-right:10px">@lang.Monitor_State</label>

                                            <input type="checkbox" class="checkbox" data-on-text="@lang.Monitor_CheckBox_Open" data-handle-width="30" data-off-text="@lang.Monitor_CheckBox_Close" data-size="mini" value="" />

                                        </div>

                                    </div>


                                    <div class="col-sm-12" style="margin-top:6px">

                                        <div class="col-sm-3">
                                            <label class="form-label">@lang.Monitor_IPWhiteList</label>
                                            <input type="text" class="form-control IPWhiteList" placeholder="@lang.Monitor_IPWhiteList_Placeholder">
                                        </div>

                                        <div class="col-sm-3">
                                            <label class="form-label">@lang.Monitor_Timeout_Percentage</label>
                                            <input value="0.00%" type="text" class="form-control IPPercent" placeholder="0.01% 15% ... ">
                                        </div>

                                    </div>

                                    <div class="col-sm-12" style="margin-top:20px;">

                                        <div style="margin-left:12px;margin-right:12px;margin-bottom:0" class="alert alert-info" role="alert">

                                            <p><b>@lang.Monitor_Type_IP</b>：@lang.Monitor_IP_Desc</p>

                                            <p> @lang.Monitor_IP_Info </p>

                                        </div>

                                    </div>

                                </div>


                            </div>

                            <div class="tab-pane" id="tab14">

                                <div class="row form-inline form">

                                    <div class="col-sm-12">

                                        <div class="col-lg-12">

                                            <label class="form-label" style="margin-right:10px">@lang.Monitor_State</label>

                                            <input type="checkbox" class="checkbox" data-on-text="@lang.Monitor_CheckBox_Open" data-handle-width="30" data-off-text="@lang.Monitor_CheckBox_Close" data-size="mini" value="" />

                                        </div>

                                    </div>

                                    <div class="col-sm-12" style="margin-top:6px">

                                        <div class="col-sm-3">
                                            <label class="form-label">@lang.Monitor_Max_Request</label>
                                            <input type="text" class="form-control RequestCount">
                                        </div>

                                    </div>

                                    <div class="col-sm-12" style="margin-top:20px;">

                                        <div style="margin-left:12px;margin-right:12px;margin-bottom:0" class="alert alert-info" role="alert">

                                            <p><b>@lang.Monitor_Type_RequestCount</b>：@lang.Monitor_Type_RequestCount_Desc </p>

                                            <p> @lang.Monitor_Type_RequestCount_Info </p>

                                        </div>

                                    </div>
                                </div>


                            </div>

                        </div>

                        <input type="hidden" class="id" value="@(Id)">

                        <div class="actions" style="margin-top:15px;margin-bottom:8px;">
                            <button onclick="saveMonitorJob()" type="button" class="btn btn-info button-previous" style="width:80px"> @lang.Save </button>

                            <a href="/HttpRequestMonitor/Monitor" type="button" class="btn btn-info button-previous" style="width:120px;margin-left:20px"> @lang.Back </a>

                        </div>


                    </div>

                </div>
            </div>

        </div>

    </div>

</div>  

<script src="/HttpRequestMonitorStaticFiles/Content/page/edit_monitor.js?ver=1.0.4"></script>


